import React, { useEffect, useState, useReducer } from "react";
import { Col, Input, Row, Button, Table } from "antd";
import { MinusCircleOutlined } from "@ant-design/icons";

import CuiModel from "./CuiModel";
import "./index.css";

const initialState = {
  shopModelStatus: false,
  tableValues: [],
};
const reducer = (state, action) => {
  console.log("模态框传入", action);
  switch (action.type) {
    case "changeShopModel":
      return {
        ...state,
        shopModelStatus: action.status,
      };
    case "changeTableValues":
      return {
        ...state,
        tableValues: [...state.tableValues, action.tableValues],
      };
    default:
  }
};

/**
 * 模态框
 */
function CuiTable(props) {
  /**
   * 设置选择菜品模态框
   */
  const [store, dispatch] = useReducer(reducer, initialState);
  const [time, setTime] = useState();
  useEffect(() => {
    props.dispatch({ type: "changeCui", cuiList: store.tableValues });
  }, [store.tableValues, time]);

  const columns = [
    {
      title: "序号",
      dataIndex: "",
      render: (item, record, index) => (
        <>
          <div className="stateDiv">{index + 1}</div>
        </>
      ),
    },
    {
      title: "菜品名",
      dataIndex: "name",
      render: (item) => (
        <>
          <Row style={{ width: 160 }}>
            <Col span={18}>
              <Input value={item} />
            </Col>
            <Col span={6}>
              <Button style={{ width: 80 }}>选择框</Button>
            </Col>
          </Row>
        </>
      ),
    },
    {
      title: "数量",
      dataIndex: this,
      render: (item) => (
        <>
          <Input
            style={{ width: 60 }}
            onChange={(e) => {
              item.count = e.target.value;
              setTime(new Date().valueOf());
            }}
          />
        </>
      ),
    },
    {
      title: "单价",
      dataIndex: "unitPrice",
      render: (item) => item,
    },
    {
      title: "计量单位",
      dataIndex: "unitOfMeasure",
    },
    {
      title: "总价",
      dataIndex: this,
      render: (item) => <>{item.count * item.unitPrice}</>,
    },
    {
      title: "",
      dataIndex: "businessArea",
      render: () => (
        <>
          <Button icon={<MinusCircleOutlined />}></Button>
        </>
      ),
    },
  ];

  return (
    <>
      <Table
        pagination={false}
        dataSource={store.tableValues}
        columns={columns}
        rowKey="id"
      />
      <Button
        style={{ width: "100%" }}
        onClick={() => {
          dispatch({ type: "changeShopModel", status: true });
        }}
      >
        添加新菜品
      </Button>
      <CuiModel data={store} dispatch={dispatch} />
    </>
  );
}
export default CuiTable;
